<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
  <head>
  	<title>Scrollport Example 1</title>
    <script src="../js/prototype.js" language="javascript" type="text/javascript"></script>
    <script src="../js/scriptaculous.js" language="javascript" type="text/javascript"></script>
    <script src="../scrollport.js" language="javascript" type="text/javascript"></script>
  
    <style>
        .content-tile    { 
          background: url(img/rounded-150x150.gif);
          text-align: center; 
          font: 8pt sans-serif; 
          width: 150px; 
          height: 150px; 
          border: none;
        }
    </style>
  </head>
  
  <body>
    <center>
      <div xstyle="width: 500px; border: solid red 1px">
        herez miToonz: 
      
        <table>
          <tr>
            <td><a href="javascript:myToonz.PanLeft()"><img src="img/arrow-left.gif" border="0" /></a></td>
            <td style="border: solid #ccc 1px">
              <div id="mytoonz" />
            </td>
            <td><a href="javascript:myToonz.PanRight()"><img src="img/arrow-right.gif" border="0" /></a></td>
          </tr>
        </table>
  
      </div> 
    </center> 
  
    <script>
      myToonz = new ScrollPort('mytoonz', {
        tileWidth:  450,
        tileHeight: 300,
        showTiles:  1,
        duration: 1.5,
        tilesPage: 'ajax-data.html',
        debug: false //true
      });
    </script>
  
    
  </body>
</html>
